<template>
  <div class="background:#F0F0F0;">
    <div class="zan-row">
      <!--左边商品类别-->
      <div class="zan-col zan-col-6" style="background:#F9F9F9;">
        <goodsCategory></goodsCategory>
      </div>
      <!--右边商品列表-->
      <div class="zan-col zan-col-18">
        <goods></goods>
      </div>
    </div>
    <!--调料-->
    <seasoning v-if="seasoning_status"></seasoning>
    <!--底部操作菜单-->
    <bottomArea></bottomArea>
    <!--底部购物车列表-->
    <cartList v-if="cart_list_status"></cartList>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
import goodsCategory from "@/components/goods_category"
import goods from "@/components/goods"
import seasoning from "@/components/seasoning"
import bottomArea from "@/components/bottom_area"
import cartList from "@/components/cart_list"
export default {
  data () {
    return {
      
    }
  },
  components: {
    goodsCategory,
    goods,
    seasoning,
    bottomArea,
    cartList
  },
  computed: {
    ...mapGetters([
      'seasoning_status',
      'cart_list_status'
    ])
  },
  methods: {
    ...mapActions([
      'setProductAttrs',
      'setGoodsList',
      'clearAllData'
    ]),
  },
  mounted () {
    this.setProductAttrs()
    this.setGoodsList()
  },
  onUnload(){
    this.clearAllData()
  }
}
</script>

<style >

</style>
